<html>
<head>
  <style type="text/css">
    #tests
    {
    empty-cells:show;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    width:100%;
    border-collapse:collapse;
    }
    #tests td, #tests th
    {
    font-size:1em;
    border:1px solid #98bf21;
    padding:3px 7px 2px 7px;
    }
    #tests th
    {
    font-size:1.1em;
    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#A7C942;
    color:#ffffff;
    }
    #tests tr.alt td
    {
    color:#000000;
    background-color:#EAF2D3;
    }

    #settings
    {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    width:100%;
    border-collapse:collapse;
    }
    #settings td, #settings th
    {
    font-size:1em;
    border:1px solid #98bf21;
    padding:3px 7px 2px 7px;
    }
    #settings th
    {
    font-size:1.1em;
    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#A7C942;
    color:#ffffff;
    }
    #settings tr.alt td
    {
    color:#000000;
    background-color:#EAF2D3;
    }

    #variables
    {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    width:100%;
    border-collapse:collapse;
    }
    #variables td, #variables th
    {
    font-size:1em;
    border:1px solid #98bf21;
    padding:3px 7px 2px 7px;
    }
    #variables th
    {
    font-size:1.1em;
    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#A7C942;
    color:#ffffff;
    }
    #variables tr.alt td
    {
    color:#000000;
    background-color:#EAF2D3;
    }
  </style>

</head>
<body>
<table id="settings">
  <tr>
    <th>Setting</th>
    <th>Value</th>
    <th>Value</th>
    <th>Value</th>
  </tr>
  <tr>
    <td>Library</td>
    <td>SeleniumLibrary</td>
    <td></td>
    <td></td>
  </tr>
</table>
<br/>
<table id="variables">
  <tr class="alt">
    <th>Variable</th>
    <th>Value</th>
    <th>Value</th>
    <th>Value</th>
  </tr>
  <tr>
    <td>${var1}</td>
    <td>hello</td>
    <td></td>
    <td></td>
  </tr>
  <tr class='alt'>
    <td>${var2}</td>
    <td>world</td>
    <td></td>
    <td></td>
  </tr>
</table>
<br/>
<table id="tests">
  <tr class="alt">
    <th>Test Case</th>
    <th>Action</th>
    <th>Argument</th>
    <th>Argument</th>
  </tr>

  <tr>
    <td>test1</td>
    <td>step1-1</td>
    <td>s1-1 p1</td>
    <td>s1-1 p2</td>
  </tr>
  <tr class='alt'>
    <td></td>
    <td>step1-2</td>
    <td>s1-2 p1</td>
    <td>s1-2 p2</td>
  </tr>
  <tr>
    <td>test2</td>
    <td>step2-1</td>
    <td>s2-1 p1</td>
    <td>s2-1 p2</td>
  </tr>
  <tr class='alt'>
    <td></td>
    <td>step2-2</td>
    <td>s2-2 p1</td>
    <td>s2-2 p2</td>
  </tr>
</table>
</body>
</html>

